@import './vw';
@import './common';

.content{
  // height: calc(100vh-vw(90)-vw(96));


  position: relative;
  z-index: 0;
  box-sizing: content-box;
  padding: vw(90) 0 0 0;
  height: 100vh;
  // background-color: red;
  overflow-y: scroll;

  &::after{
    content: '';
    display: block;
    height: vw(96);
    visibility: hidden;
    
  }
  

  .banner{
    position: relative;
    font-size: 0;
    img{
      width: 100%;
    }
    .mask-layer{
      height: vw(104);
      background-color: rgba(0,0,0,.3);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      font-size: vw(17);

      >p{
        font-size: vw(26);
        text-align: center;
        margin-top: vw(24);
        margin-bottom: vw(22);
      }
      .mask-text{
        display: flex;
        justify-content: space-between;
        padding:0 vw(20) 0 vw(30);
        font-size: vw(17);

        .four{
          display: flex;
          align-self: flex-end;
          .four-item{
            margin-left: vw(12);
            width: vw(10);
            height: vw(10);
            border-radius: 50%;
            background-color: #fff;
          }
          .four-item:first-child{
            background-color: red;
          }
        }

        

        .like{
          display:flex;
          align-items: center;
        .love{
          margin-right: vw(48);
          // display: inline-block;
          img{
            margin-right: vw(6);
            width: vw(19);
            height: vw(18);
          }
        }

        .eye{
          // display: inline-block;
          img{
            margin-right: vw(6);
            width: vw(21);
            height: vw(12);
          }
        }

        
      }
      }
    }
  }

  .case-wrapper{
    .case-one{
      display: flex;
      margin: vw(30) auto 0;
      margin-bottom: vw(18);
      box-sizing: content-box;
      justify-content: space-between;
      width: vw(581);
      height: vw(117);
      border-bottom: 1px solid #e2e2e2;
      .left{
        display: flex;
        width: vw(350);
        flex-wrap: wrap;

        p:first-child{
          font-size: vw(25);
          font-weight: 600;
          line-height: vw(31);

        }

        .like-box{
          display: flex;
          align-self: flex-end;
          align-items: center;
          width: 100%;
          justify-content: space-between;
          color:#c5c5c5;

          span:first-child{
            display: flex;
            align-items: center;
            font-size: vw(18);
            img{
              margin-right: 6px;
            }
          }
          span:last-child{
            font-size: vw(20);
          }
        }
      }

      .right{
        width: vw(208);
        img{
          width: 100%;
        }
      }
    }
    .case-one:nth-of-type(2){
      border: none;
    }

    .grey-line{
      height: vw(25);
      background-color: #f5f5f5;
    }

    .new-wrapper{
      margin: vw(35) auto vw(18);
      width: vw(581);

      .new-top{
        margin-bottom: vw(18);
        font-size: vw(25);
        font-weight: 600;
        letter-spacing: 1px;
      }

      .new-middle{
        margin-bottom: vw(12);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .new-photo{
          width: vw(185);
          img{
            width: 100%;
          }
        }
      }
      .new-bottom{
        display: flex;
        justify-content: space-between;
       
        .new-bottom-left{
          display: flex;
          flex: 0 0 42.5%;
          align-items: center;
          justify-content: space-between;
          span{
            display: flex;
            align-items: center;
            font-size: vw(16);
            color:#c5c5c5;
            img{
              margin-right: vw(4);
              width: vw(18);
            }
          }
          span:last-child{
            margin-right: vw(9);
            font-size: vw(19);
            // img{
            //   width: vw(18);
            // }
          }
        }
        .new-bottom-right{
          // flex:0 0 36%;
          font-size: vw(20);
          color: #c5c5c5;
          letter-spacing: 2px;
        }
      }


    }

    .more{
      display: flex;
      font-size: vw(22);
      color: #bbbbbb;
      justify-content: center;
      align-items: center;
      margin-bottom: vw(33);
    }



  }

  
}